<template>
  <div class="container">
    <div class="header">
      <van-search v-model="workDay" placeholder="请输入日期查询" shape="round" @search="getCostList()" />
      <EditBar label="其他支出" can-edit @edit="jumpOtherPay">
        <van-field v-bind="textProps" label="产生费用" :value="otherPay" readonly />
      </EditBar>
    </div>
    <div v-if="costList.length" class="content">
      <EditBar
        v-for="(v,i) in costList"
        :key="i"
        :label="`${v.workDay} 工作日志`"
        :name="v.primaryUserName"
        :can-edit="closedCase"
        :can-remove="closedCase"
        @edit="jumpWorkOrder(v)"
        @remove="removeWorkLogConfirm(v)"
      >
        <van-field v-bind="textProps" label="工作内容" :value="v.workContent" readonly />
        <van-field v-bind="textProps" label="产生费用" :value="v.feeSum" readonly />
        <van-field v-bind="textProps" label="参与人员" :value="v.coordinateUser" readonly />
      </EditBar>
    </div>
    <div v-else class="nodata">
      <img src="@/assets/image/nodata.png" alt="">
    </div>

    <span class="btns btn1" @click="jumpWorkOrder"><span>工作<br />日志</span></span>
    <span class="btns btn2" @click="jumpOtherPay"><span>其他<br />支出</span></span>
  </div>
</template>

<script>
import EditBar from '../../components/EditBar'
import { openWx, textProps } from '@/assets/utils'

export default {
  components: { EditBar },
  props: {
    orderInfo: { type: Object, default: null },
  },
  data() {
    return {
      textProps,
      workDay: '',

      otherPay: null,

      costList: [],
    }
  },
  computed: {
    // 是否已结案
    closedCase() {
      return this.orderInfo?.orderStatus !== '03'
    },
  },
  created() {
    this.init()
  },
  mounted() {
  },
  methods: {

    init() {
      this.getOtherPay()
      this.getCostList()
    },

    // 查询工作日志的费用数据
    async getCostList() {
      if (!this.orderInfo?.uuid) return
      const res = await this.server.get('/saleService/getWorkLogListBySaleServiceId', {
        saleServiceId: this.orderInfo?.uuid,
        workDay: this.workDay,
      })
      if (res.code === '0') this.costList = res.object
    },

    // 查询其他支出的汇总金额
    async getOtherPay() {
      if (!this.orderInfo?.uuid) return
      const res = await this.server.get('/saleService/getOtherSumFeeBySaleServiceId', {
        saleServiceId: this.orderInfo?.uuid,
      })
      if (res.code === '0') this.otherPay = res.object
    },

    jumpOtherPay() {
      openWx(`${location.origin}/costList.html`)
    },

    jumpWorkOrder(v) {
      openWx(`${location.origin}/workRecord.html`, `&workLogId=${v?.uuid || ''}`)
    },

    removeWorkLogConfirm(v) {
      this.$dialog.confirm({
        title: '提示',
        message: '确认要删除？',
      }).then(() => this.removeWorkLog(v))
        .catch(() => {})
    },

    async removeWorkLog(v) {
      const res = await this.server.get('/saleService/deleteWorkLogById', {
        workLogId: v.uuid,
      })
      if (res.code === '0') {
        this.$toast({ message:'删除成功！', onClose: () => this.init() })
      }
    },
  },
}
</script>

<style lang='less' scoped>
.container{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  .header{
    width: 100%;
  }
  .content{
    width: 100%;
    flex: 1;
  }
  .btns{
    position: fixed;
    right: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    color: #fff;
    font-size: 14px;
    &.btn1{
      background: #1F87FC;
      bottom: 160px;
    }
    &.btn2{
      background: red;
      bottom: 80px;
    }
  }
}
</style>
